<template>
  <van-nav-bar
  title="地址编辑"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
  <div>
    <van-address-edit
      :area-list="areaList"
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @change-default="onChangeDefault"
    />
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useLocationStore } from '@/store/location.js';
import { showToast } from 'vant';
// 导入Vant的地区数据
import { areaList as provinceCityAreaList } from '@vant/area-data';

defineOptions({
  name: 'LocationEdit',
})

const isDefault=ref(false)
const router = useRouter();
const route = useRoute();
const locationStore = useLocationStore();

// 编辑模式下的地址数据
const editAddressData = ref(null);

// 使用Vant提供的中国地区数据
const areaList = reactive(provinceCityAreaList)
const searchResult = reactive([])
const onClickLeft = () => {
  router.back();
}
// 保存地址
const onSave = (content) => {
  // 生成新id，根据当前地址列表长度+1
  const newId = (locationStore.locationsList.length + 1).toString();
  
  // 构建完整的地址字符串
  const fullAddress = `${content.province}${content.city}${content.county}${content.addressDetail}`;
  
  // 创建新地址对象
  const newAddress = {
    id: newId,
    name: content.name,
    tel: content.tel,
    address: fullAddress,
    isDefault: isDefault.value,
  };
  
  // 添加到地址列表
  locationStore.locationsList.push(newAddress);
  
  // 显示成功提示
  showToast('地址添加成功');
  
  // 返回地址列表页
  router.back();
}


const onChangeDefault = (val) => {
  isDefault.value=val
    }
</script>

<style scoped lang="scss">
</style>